<template>
	<view class="content" @click="closeAllShow">
		
		<u-navbar :is-back="true">
			<view style="height: 10px;"></view>
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
				<view class="slot-wrap-left"></view>
				<view class="slot-wrap-center pr" style="left:-20px;">{{title}}</view>
		        <view class="slot-wrap-right pr"> 
				    
					<view class="mr20" @click="toUserHome">
						<u-icon name="more-dot-fill"  size="44"></u-icon>
					</view>
					<!--<view v-if="topDropDownShow" class="pa plus_mores" :style="'top:'+(topRange-45)+'px;'">
						<view class="triangle-up"></view>
						<view class="colccc" style="border-bottom: 1px solid #333333;padding:10px;">
							<u-icon name="wodekaoqin" custom-prefix="qxl-icon" color="#cccccc" size="38"></u-icon>
							<text>我要签到</text>
						</view>
						<view class="colccc" style="border-bottom: 1px solid #333333;padding:10px;">
							<u-icon name="man-add-fill" size="44"></u-icon>
							<text>添加朋友</text>
						</view>
						<view class="colccc" style="padding:10px;">
							<u-icon name="kehuqunzu" custom-prefix="qxl-icon" style="position: relative;top:2px;right:2px;" size="44"></u-icon>
							<text>发起群聊</text>
						</view>
					</view>-->
				</view>
			</view>
		</u-navbar>
		
		<!--长按显示更多操作-->
		<view v-if="showIndex == 1" :style="showIndex == 1 ? listToolStyle : ''"  class="pa convers-tool">
			<view v-if="toolsData.type == 'fa_hong_bao' || toolsData.type == 'shou_hong_bao' || toolsData.type == 'TIMSoundElem'"
			style="color:#666" class="pv25 conv-bor">收藏消息</view>
			<view v-else @click="collect" 
			:data-id="toolsData.ID"
			:data-type="toolsData.type" 
			:data-text="toolsData.payload.text"
			:data-video="toolsData.payload.videoUrl"
			:data-video-thumb="toolsData.payload.thumbUrl"
			:data-video-thumb-width="toolsData.payload.thumbWidth"
			:data-video-thumb-height="toolsData.payload.thumbHeight"
			:data-video-time="toolsData.payload.videoSecond"
			:data-image="toolsData.payload.imageInfoArray ? toolsData.payload.imageInfoArray[0].imageUrl : ''"
			class="pv25 conv-bor">收藏消息</view>
			
			<view v-if="toolsData.type == 'TIMTextElem'" @click="copyInfo" :data-text="toolsData.payload.text" class="pv25 conv-bor">复制消息</view>
			<view v-else style="color:#666;" class="pv25 conv-bor">复制消息</view>
			
			<view v-if="toolsData.type == 'fa_hong_bao' || toolsData.type == 'shou_hong_bao'" style="color:#666;" class="pv25 conv-bor">撤回消息</view>
			<view v-else-if="toolsData.flow == 'out'" @click="revokeMessage" :data-index="toolsData.consmIndex" :data-id="toolsData.ID" class="pv25 conv-bor">撤回消息</view>
			<view v-else style="color:#666;" class="pv25 conv-bor">撤回消息</view>
			<view @click="deleteMessage" :data-id="toolsData.ID" :data-index="toolsData.consmIndex" class="pv25">删除聊天</view>
		</view>
		
		
		<scroll-view 
		class="scroll-Y" 
		scroll-y="true" 
		@scrolltolower="onToupper" 
		:scroll-top="scrollTop" 
		:style="{height: scrollHeight + 'px'}"
		@scroll="onScroll"
		:scroll-with-animation="true"
		@click="showMore=false">
		
			<!--加载状态-->
			<view v-if="send_load" id="list_-1" class="for-list">
				<view style="height: 40px;"></view><!--占位-->
				<view class="item right">
					<!-- 时间 -->
					<!--<view class="time">12.00</view>-->				
					<view class="chat">
						<view class="text pr">
							<view >
								<view class="name">{{userProfile.nick}}</view>
								<!-- 文字 -->
								<view class="content-info">
									<image src="/static/image/13221814.gif" class="pr" style="width: 20px;height: 20px;top:4px;"></image>
									<text style="color:#666">正在发送...</text>
								</view>
							</view>
							
						</view>
						<view class="pictrue">
							<view  style="width: 102rpx;height: 102rpx;overflow: hidden;border-radius:4px;">
								<u-image width="100rpx" :fade="false" :src="userProfile.avatar" height="100rpx">
									<template v-slot:error>
										<image src="/static/image/default-user.png" style="width:100rpx;height:100rpx;"></image>
									</template>
								</u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
				
			<view v-for="(item,index) in $vuex.state.globalData.messageList" 
			:key="item.ID" 
			:id="'list_'+item.ID" 
			class="for-list">
			    <view v-if="index == 0" style="height: 40px;"></view><!--占位-->
				<view v-if="item.isDeleted==false">
					<view v-if="item.flow == 'in'" class="item left">
						<!-- 时间 -->
						<view class="time">{{item.timeString}}</view>
						<view v-if="item.isRevoked" style="text-align: center;">
							<view v-if="item.conversationType == 'C2C'" class="revoked" >
								对方撤回了一条消息
							</view>
							<view v-else class="revoked" >
								“{{item.nick}}”撤回了一条消息
							</view>
						</view>
						<view v-else-if="item.cloudCustomData == 'wechat_number'" class="chat"><!--自动回复微信号-->
							<view class="pictrue">
								<view  style="width: 102rpx;height: 102rpx;overflow: hidden;border-radius:4px;">
									<u-image width="100rpx" :fade="false" height="100rpx" :src="item.avatar">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:100rpx;height:100rpx;"></image>
										</template>
									</u-image>
								</view>
							</view>
							<view class="text pr">
								<view class="name">{{item.nick}}</view>
								<view class="content-info" style="min-width: 400rpx;">
								  <view class="disf bbo pb10">
									  <view><image src="/static/image/wx_acc.png" style="width:80rpx;height:80rpx;"></image></view>
									  <view class="ml10">
										  <view class="f28 col999">我的微信号</view>
									      <view>{{item.payload.text}}</view>
									  </view>
								  </view>	
								  <view class="f28 pt20" style="text-align: center;color:#2979ff">
									  <text @click="copyInfo" :data-text="item.payload.text">复制微信号</text>
								  </view>
								</view>
							</view>
						</view><!--自动回复微信号结束-->
						
						<view v-else class="chat">
							<view class="pictrue">
								<view  style="width: 102rpx;height: 102rpx;overflow: hidden;border-radius:4px;">
									<u-image width="100rpx" :fade="false" height="100rpx" :src="item.avatar">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:100rpx;height:100rpx;"></image>
										</template>
									</u-image>
								</view>
							</view>
							<view class="text pr">
								<view class="name">{{item.nick}}</view>
								<view @touchstart.stop="handleTouchStart" @touchend="handleTouchEnd" :data-index="index">
									<!-- 文字 -->
									<view v-if="item.type == 'TIMTextElem'" class="content-info">{{item.payload.text}}</view>
									
									<!-- 图片 -->
									<view v-else-if="item.type == 'TIMImageElem'">
									   <image  @click="openImage" :data-src="item.payload.imageInfoArray[0].imageUrl" class="text-image" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix"></image>
									</view>
						
									
									<!-- 视频 -->
									<view v-else-if="item.type == 'TIMVideoFileElem'" class="pr" @click.stop="playVideo" :data-url="item.payload.videoUrl" :style="'height: '+(item.payload.thumbHeight*0.2)+'rpx;width: '+(item.payload.thumbWidth*0.2)+'rpx;overflow: hidden;'">
									    <image :src="item.payload.thumbUrl" class="pa" style="width: 100%;height: 100%;z-index:0;top:0;left:0;" ></image>
									   <view class="pa" :style="'display: inline-block;top:'+((item.payload.thumbHeight*0.2)/2-50)+'rpx;left:'+((item.payload.thumbWidth*0.2)/2-50)+'rpx;'">
										  <u-icon name="bofangshipin" custom-prefix="qxl-icon" color="#ffffff" size="100"></u-icon>
									   </view>
									   <view class="pa f30" style="bottom: 20rpx;width: 100%;right: 20rpx;color:#fff;text-align: right;">{{item.payload.videoSecond_str}}</view>
                                    </view>
									
									<!--语音  [未处理不是 item.payload.text 值]-->
									<view v-else-if="item.type == 'TIMSoundElem'" @click="playSound" :data-src="item.payload.text" class="content-info disf">
										<image v-if="playIndex != index" @click.stop="playVoice" :data-index="index" class="text-image" src="/static/image/left_stop.png" style="min-width: 0 ;max-width:100rpx;width:40rpx;height: 40rpx;" ></image>
										<image v-else-if="playIndex == index"  @click.stop="playVoice"  class="text-image" src="/static/image/left_play.gif" style="min-width: 0 ;max-width:100rpx;width:40rpx;height: 40rpx;"></image>
										<!--<text class="pr f30" style="top:10rpx;left:5rpx;">7</text>-->
									</view>
									
									<!--发出红包-->
									<view v-else-if="item.type == 'fa_hong_bao'" 
									@click="receiveRed" 
									:data-title="item.payload.text"
									:data-number="item.payload.number" 
									:data-red_packet_id="item.payload.id"
									:data-flow="item.flow"
									:data-type="item.conversationType" 
									:data-offer_name="item.nick"
									:data-offer_pic="item.avatar"
									class="content-info form-send-red">
										<!--<image class="text-image" src="/static/image/send_red.png" mode="widthFix"></image>-->
										<view class="pr" style="background: #eda050;width:360rpx;height: 160rpx;border-radius: 4px;overflow: hidden;">
											<view class="disf mt15">
												<view>
													<u-icon name="a-001_hongbao" custom-prefix="qxl-icon" color="red" size="90"></u-icon>
												</view>
												<view class="pr" style="color:#ffffff;top:5rpx;width:260rpx;">
													<view class="f30 toell">{{item.payload.text}}</view>
													<view class="f26">领取红包</view>
												</view>
											</view>
											<view class="pa" 
											style="
											   background: #fff;
											   height: 40rpx;
											   left:0;bottom:0;
											   width:100%;
											   padding-left: 10rpx;
											   line-height: 40rpx;
											   font-size: 20rpx;">{{userInfo.virtual_coin_name}}红包</view>
										</view>
									</view>
									
									<!--收到红包-->
									<view v-else-if="item.type == 'shou_hong_bao'" 
									@click="showSideRed" 
									:data-title="item.payload.text"
									:data-number="item.payload.number" 
									:data-red_packet_id="item.payload.id"
									class="content-info form-receipt-red">
										<!--<view class="pa f28" style="width: 100%;text-align: center;left:0;top:20rpx;height:20rpx;z-index: 1;color:#c71f30;">{{item.payload.number}}</view>
										<image class="text-image" src="/static/image/receipts.png" mode="widthFix"></image>-->
										<view class="pr" style="background: #eda050;width:360rpx;height: 160rpx;border-radius: 4px;overflow: hidden;">
											<view class="disf mt15">
												<view>
													<u-icon name="a-001_hongbao" custom-prefix="qxl-icon" color="red" size="90"></u-icon>
												</view>
												<view class="pr" style="color:#ffffff;top:5rpx;width:260rpx;">
													<view class="f30 toell">{{userInfo.virtual_coin_name}}({{item.payload.number}})</view>
													<view class="f26">对方已收红包</view>
												</view>
											</view>
											<view class="pa" 
											style="
											   background: #fff;
											   height: 40rpx;
											   left:0;bottom:0;
											   width:100%;
											   padding-left: 10rpx;
											   line-height: 40rpx;
											   font-size: 20rpx;">{{userInfo.virtual_coin_name}}红包</view>
										</view>
									</view>
									
									<!-- 自定义图片/收藏图片[纯URL] -->
									<view v-else-if="item.type == 'fa_tu_pian'">
									   <image  @click="openImage" :data-src="item.payload.text" class="text-image" :src="item.payload.text" mode="widthFix"></image>
									</view>
									
								</view>
							</view>
						</view>
						
					</view>
					
					<view v-else class="item right">
						<!-- 时间 -->
						<view class="time">{{item.timeString}}</view>
						
						<view v-if="item.customCard" class="mb40"><!--商机卡片-->
						
							<view @click="goPage" :data-uri="'/pages/business-details/business-details?id='+item.customCard.id" style="text-align: center;" >
								<view class="p30 bgf" style="display: inline-block;width: 500rpx;height: 210rpx;border-radius: 10px;">
									<view class="f32 b text-container mb20" style="height: 88rpx;">{{item.customCard.title}}</view>
								    <view class="bto disfr-lr pt15">
										<view class="card-user disf">
											<u-image width="48rpx" shape="circle" :fade="false" height="48rpx" :src="item.customCard.author_img">
												<template v-slot:error>
													<image src="/static/image/default-user.png" style="width:48rpx;height:48rpx;"></image>
												</template>
											</u-image>
											<view class="toell f30 pr" style="width: 200rpx;top:3rpx;">{{item.customCard.author}}</view>
										</view>
										<view><view class="f24" style="background: #eee;padding:6rpx 14rpx;border-radius: 4px;color:#2979ff">{{item.customCard.cate_name}}</view></view>
									</view>
								</view>
							</view>
							
						</view><!--商机卡片结束-->
						
						
						<view v-if="item.isRevoked" style="text-align: center;">
							<view class="revoked" >
								你撤回了一条消息
							</view>
						</view>
						<view v-else-if="item.cloudCustomData == 'wechat_number'" class="chat"><!--自动回复微信号-->
						    <view class="text pr">
								<view class="name">{{$vuex.state.globalData.user.nickname}}</view>
								<view class="content-info" style="min-width: 400rpx;">
									<view class="disf bbo pb10">
										  <view class="pr" style="width: 80rpx;height: 80rpx;">
											  <view class="pa bgf" style="width: 60rpx;height: 60rpx;left:10rpx;top:10rpx;"></view>
											  <image src="/static/image/wx_acc.png" class="pa" style="width:80rpx;height:80rpx;left:0;top:0;z-index: 2;"></image>
											</view>
										  <view class="ml10">
											  <view class="f28" style="color:#666666;">我的微信号</view>
											  <view style="color:#222222;">{{item.payload.text}}</view>
										  </view>
									</view>	
									<view class="f28 pt20" style="text-align: center;color:#2979ff">
										<text @click="copyInfo" :data-text="item.payload.text">复制微信号</text>
									</view>
								</view>
							</view>
							<view class="pictrue">
								<view  style="width: 102rpx;height: 102rpx;overflow: hidden;border-radius:4px;">
									<u-image width="100rpx" :fade="false" height="100rpx" :src="$vuex.state.globalData.user.head_pic">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:100rpx;height:100rpx;"></image>
										</template>
									</u-image>
								</view>
							</view>
						</view><!--自动回复微信号结束-->
						
						<view v-else class="chat">
							<view class="text pr">
								<view @touchstart.stop="handleTouchStart" @touchend="handleTouchEnd" :data-index="index">
									<view class="name">{{$vuex.state.globalData.user.nickname}}</view>
									<!-- 文字 -->
									<view v-if="item.type == 'TIMTextElem'" class="content-info">{{item.payload.text}}</view>
									
									<!-- 图片 -->
									<view v-else-if="item.type == 'TIMImageElem'" >
									  <image  @click="openImage" :data-src="item.payload.imageInfoArray[0].imageUrl" class="text-image" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix"></image>
									</view>
									
									<!-- 视频-->
									<view v-else-if="item.type == 'TIMVideoFileElem'">
										<view v-if="item.status == 'fail'" class="content-info"><!--失败-->
										   <u-icon name="info-circle-fill" color="red" size="38"></u-icon>视频发送失败
										</view>
										<view v-else class="pr" @click.stop="playVideo" :data-url="item.payload.videoUrl" :style="'height: '+(item.payload.thumbHeight*0.2)+'rpx;width: '+(item.payload.thumbWidth*0.2)+'rpx;overflow: hidden;'">
											<image :src="item.payload.thumbUrl" class="pa" style="width: 100%;height: 100%;z-index:0;top:0;left:0;" ></image>
											<view class="pa" :style="'display: inline-block;top:'+((item.payload.thumbHeight*0.2)/2-50)+'rpx;left:'+((item.payload.thumbWidth*0.2)/2-50)+'rpx;'">
												<u-icon name="bofangshipin" custom-prefix="qxl-icon" color="#ffffff" size="100"></u-icon>
											</view>
											<view class="pa f30" style="bottom: 20rpx;width: 100%;right: 20rpx;color:#fff;text-align: right;">{{item.payload.videoSecond_str}}</view>
										</view>
									</view>
									
									<!--语音  [未处理不是 item.payload.text 值]-->
									<view v-else-if="item.type == 'TIMSoundElem'" class="content-info" style="padding: 10rpx 20rpx;">
										<view class="disfr-lr">
											<view style="width: 1px;"></view>
											<view>
											  <image v-if="playIndex != index" @click.stop="playVoice" :data-index="index" class="text-image" src="/static/image/right_stop.png" style="min-width: 0 ;max-width:100rpx;width:40rpx;height: 40rpx;"></image>
											  <image v-else-if="playIndex == index"  @click.stop="playVoice" :data-index="index" class="text-image" src="/static/image/right_play.gif" style="min-width: 0 ;max-width:100rpx;width:40rpx;height: 40rpx;"></image>
										    </view>
										</view>
										
									</view>
									
									<!--发出红包--> 
									<view v-else-if="item.type == 'fa_hong_bao'" 
									  @click="myReceiveRed" 
									  :data-title="item.payload.text" 
									  :data-number="item.payload.number" 
									  :data-red_packet_id="item.payload.id"
									  :data-flow="item.flow"
									  :data-type="item.conversationType"
									  class="content-info my-send-red">
										<!--<image class="text-image" src="/static/image/send_red.png" mode="widthFix"></image>-->
										<view class="pr" style="background: #eda050;width:360rpx;height: 160rpx;border-radius: 4px;overflow: hidden;">
											<view class="disf mt15">
												<view>
													<u-icon name="a-001_hongbao" custom-prefix="qxl-icon" color="red" size="90"></u-icon>
												</view>
												<view class="pr" style="color:#ffffff;top:5rpx;width:260rpx;">
													<view class="f30 toell">{{item.payload.text}}</view>
													<view class="f26">领取红包</view>
												</view>
											</view>
											<view class="pa" 
											style="
											   background: #fff;
											   height: 40rpx;
											   left:0;bottom:0;
											   width:100%;
											   padding-left: 10rpx;
											   line-height: 40rpx;
											   font-size: 20rpx;">{{userInfo.virtual_coin_name}}红包</view>
										</view>
									</view>
									
									<!--收到红包--> 
									<view v-else-if="item.type == 'shou_hong_bao'"
									   @click="showRed" 
									   :data-title="item.payload.text" 
									   :data-number="item.payload.number" 
									   :data-red_packet_id="item.payload.id"
									   class="content-info my-receipt-red">
										<!--<view class="pa f28" style="width: 100%;text-align: center;left:0;top:20rpx;height:20rpx;z-index: 1;color:#c71f30;">{{item.payload.number}}</view>
										<image class="text-image" src="/static/image/receipts.png" mode="widthFix"></image>-->
										<view class="pr" style="background: #eda050;width:360rpx;height: 160rpx;border-radius: 4px;overflow: hidden;">
											<view class="disf mt15">
												<view>
													<u-icon name="a-001_hongbao" custom-prefix="qxl-icon" color="red" size="90"></u-icon>
												</view>
												<view class="pr" style="color:#ffffff;top:5rpx;width:260rpx;">
													<view class="f30 toell">{{userInfo.virtual_coin_name}}({{item.payload.number}})</view>
													<view class="f26">已收红包</view>
												</view>
											</view>
											<view class="pa" 
											style="
											   background: #fff;
											   height: 40rpx;
											   left:0;bottom:0;
											   width:100%;
											   padding-left: 10rpx;
											   line-height: 40rpx;
											   font-size: 20rpx;">{{userInfo.virtual_coin_name}}红包</view>
										</view>
									</view>
									
									<!-- 自定义图片/收藏图片[纯URL] -->
									<view v-else-if="item.type == 'fa_tu_pian'">
									<image  @click="openImage" :data-src="item.payload.text" class="text-image" :src="item.payload.text" mode="widthFix"></image>
									</view>
									
								</view>
							</view>
							<view class="pictrue">
								<view  style="width: 102rpx;height: 102rpx;overflow: hidden;border-radius:4px;">
									<u-image width="100rpx" :fade="false" height="100rpx" :src="$vuex.state.globalData.user.head_pic">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:100rpx;height:100rpx;"></image>
										</template>
									</u-image>
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
			
			<view v-if="load_page" style="text-align: center;">
				<image src="/static/image/9c62187e.gif" style="width: 130rpx;height: 130rpx;"></image>
			</view>		
		</scroll-view>
		<view style="height: 40rpx;"></view>
		<!--返回底部浮球-->
		<view v-if="$vuex.state.globalData.scrollTopValue > 100 && $vuex.state.globalData.showToBottom" @click="toBttom" class="pf back_bot f30 box-shadow4" style="right: 40rpx;bottom:140rpx;background: #fff;height:70rpx;width: 200rpx;line-height: 70rpx;text-align: center;border-radius: 4px;">
			<view>
			  <text class="pr" style="top:-3rpx;">有新消息</text>
			  <u-icon name="a-iconshuangxiangxiajiantou" custom-prefix="qxl-icon" color="#666666" size="40"></u-icon>
			</view>
		</view>
		
		<view :class="showMore?'fun top':'fun'" style="background: #fff;z-index:2">
			<view class="line"></view>
			<view class="f-b">
				
				<view class="voice-image" @click="showVoices">
					<image v-if="isVoice" src="/static/image/jianp.png" class="icon" mode="widthFix"></image>
					<image v-else src="/static/image/yy.png" class="icon2" mode="widthFix"></image>
				</view>
				
				<!--<view class="voice-image" @click="createImageMessage">
					<u-icon name="tupian" custom-prefix="qxl-icon" color="#333333" size="45"></u-icon>
				</view>-->
				
				<view v-if="!isVoice" :class="text?'input w':'input'">
					<input type="text" cursor-spacing="15" :adjust-position="true" v-model="text" @focus="onFocus" @blur="onBlur">
				</view>
				<view v-else class="on-voice" @longpress="onLongpress" @touchend="onTouchend">
					按住 说话
				</view>
				<view class="more-image" v-if="!text||isVoice" @click="onMore">
					<image src="/static/image/jiahao.png" class="icon" mode="widthFix"></image>
				</view>
				
				<view class="submit" @click="submit" v-else>发送</view>
			</view>
		</view>
		<view :class="showMore?'more-box':'more-box bottom'" style="z-index: 2;">
			<view class="line"></view>
			<view class="disfr-lr p30" style="padding-top: 30rpx;padding-bottom: 15rpx;">
				<view @click="sendRedEnvelope" class="f30 mr20" style="text-align: center;width: 120rpx;background: #eee;height: 120rpx;color:#666;border-radius: 6px;">
					<view class="mt15"><u-icon name="hongbao" custom-prefix="qxl-icon" size="45"></u-icon></view>
					<view class="mt5">红包</view>
				</view>
				<view @click="getCollectionList" class="f30 mr20" style="text-align: center;width: 120rpx;background: #eee;height: 120rpx;color:#666;border-radius: 6px;">
					<view class="mt10"><u-icon name="a-shoucang1" custom-prefix="qxl-icon" size="55"></u-icon></view>
					<view class="mt5">收藏</view>
				</view>
				<view @click="createImageMessage" data-type="album" class="f30 mr20" style="text-align: center;width: 120rpx;background: #eee;height: 120rpx;color:#666;border-radius: 6px;">
					<view class="mt15"><u-icon name="a-219xiangce" custom-prefix="qxl-icon" size="50"></u-icon></view>
					<view class="mt5">图片</view>
				</view>
				<view @click="createImageMessage" data-type="camera" class="f30 mr20" style="text-align: center;width: 120rpx;background: #eee;height: 120rpx;color:#666;border-radius: 6px;">
					<view class="mt15"><u-icon name="paishe-xuanzhong" custom-prefix="qxl-icon" size="53"></u-icon></view>
					<view class="mt5">拍摄</view>
				</view>
				<view @click="chooseMedia" class="f30 mr20" style="text-align: center;width: 120rpx;background: #eee;height: 120rpx;color:#666;border-radius: 6px;">
					<view class="mt5"><u-icon name="shipin" custom-prefix="qxl-icon" size="60"></u-icon></view>
					<view class="mt5">影像</view>
				</view>
			</view>
			<view class="disfr-lr p30" style="padding-top: 0;">
				<view style="width: 100rpx;"></view>
				<view @click="sendAccount" data-name="wei_xin" class="f30 mr20" style="text-align: center;width: 160rpx;background: #eee;height: 70rpx;color:#666;border-radius: 20px;text-align: center;line-height: 70rpx;;">
					发微信
				</view>
				<view @click="sendAccount" data-name="dou_yin" class="f30 mr20" style="text-align: center;width: 160rpx;background: #eee;height: 70rpx;color:#666;border-radius: 20px;text-align: center;line-height: 70rpx;;">
					发抖音
				</view>
				<view @click="sendAccount" data-name="kuai_shou" class="f30 mr20" style="text-align: center;width: 160rpx;background: #eee;height: 70rpx;color:#666;border-radius: 20px;text-align: center;line-height: 70rpx;;">
					发快手
				</view>
				
			</view>
		</view>
		
		<!--发红包弹框-->
		<u-popup v-model="showSendRedEnvelope" mode="bottom" border-radius="14" height="300px" :closeable="true">
			<view style="margin-top: 10px;" class="p20">
				<view>
					<image :src="userInfo.other_side ? userInfo.other_side.head_pic : ''" style="height: 30px;width:30px;border-radius: 6px;"></image>
				    <text style="position: relative;top:-8px;left:3px;font-size:14px;">{{userInfo.other_side ? userInfo.other_side.name : ''}}</text>
				</view>
				<form @submit="sendRedEnvelopeForm">
					<view class="form-list mt60 pr">
						<input type="text" name="title" :value="userInfo.virtual_coin_name+'到了'" placeholder="'输入标题" placeholder-style="color: #8f8f8f;" />
					</view>
					<view class="form-list mt60 pr">
						<input type="number" name="amount" :placeholder="'输入'+userInfo.virtual_coin_name+'数量'" placeholder-style="color: #8f8f8f;" />
					</view>
					<view style="height: 80rpx;"></view>
					<view class="form-list">
						<button form-type="submit" class="my_button">发送</button>
					</view>
				</form>
			</view>
		</u-popup>
		
		<!--显示抢红包进度-->
		<u-mask :show="robShowMask" z-index="1"></u-mask>
		<view v-if="robShowMask" class="pf" style="width: 560rpx;left:100rpx;top:25%;z-index: 2;">
			<view class="pr">
			  <view class="pa f40" :style="'left:0;top:50rpx;text-align: center;color:'+(progressRed == 2 ? '#66666' : '#fff')+';z-index: 3;width: 100%;'">
			     {{userInfo.virtual_coin_name}}
			  </view>	
			  
			  <!--关闭按钮-->
			  <view class="pa" style="width: 100%;left:0;top:50rpx;text-align: center;z-index: 3;text-align: right;padding-right: 30rpx;">
			  	<view @click="closeRobShowMask" :style="'display: inline;color:'+(progressRed == 2 ? '#666666' : '#fff')+';'"><u-icon name="close" size="40"></u-icon></view>
			  </view>
			  
			  <!--开按钮-->
			  <view class="pa" style="width: 100%;left:0;top:120rpx;text-align: center;z-index: 3;">
				  <view @click="robForm" style="display: inline-block;width:150rpx;height:150rpx;background-color: rgba(255, 255, 255, 0);"></view>
			  </view>
			  
			  <!-- 开始显示-->
			  <view v-if="progressRed == 0" class="pa f40" style="left:0;top:380rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
			  		<view class="f28" style="text-align: center;color:#ccc;">
			  			<text class="mr20">来自</text>
			  			<image :src="sendRedUser.offer_pic" class="pr"
			  			style="height: 50rpx;width:50rpx;border-radius: 50%;top:13rpx;right:3rpx;"></image>
			  			<text class="toell pr" style="display: inline-block;max-width: 200rpx;top:8rpx">{{sendRedUser.offer_name}}</text>
			  			<text class="ml20">的红包</text>
			  		</view>
					<view class="mt80 colccc f32"><u-icon name="checkmark-circle-fill" size="40"></u-icon><text class="pr" style="left:5rpx;top:-6rpx;">手快有手慢没有哦</text></view>
			  </view>
			  
			  <!--抢红包进度-->
			  <view v-else-if="progressRed == 1" class="pa f40" style="left:0;top:350rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
			  	<view style="font-size: 100rpx;"><image src="/static/image/9c62187e.gif" style="width: 162rpx;height: 162rpx;"></image></view>		
			  </view>
			  
			  <!-- 收下显示 -->
			  <view v-else-if="progressRed == 2" class="pa f40" style="left:0;top:320rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
				  <view class="f28" style="text-align: center;color:#ccc;">
					  <text class="mr20">来自</text>
					  <image :src="sendRedUser.offer_pic" class="pr"
					  style="height: 50rpx;width:50rpx;border-radius: 50%;top:13rpx;right:3rpx;"></image>
					  <text class="toell pr" style="display: inline-block;max-width: 200rpx;top:8rpx">{{sendRedUser.offer_name}}</text>
					  <text class="ml20">的红包</text>
				  </view>
				  <view class="mt30" style="font-size: 100rpx;">{{redAmount}}</view>
				  <view class="mt50 colccc f32"><u-icon name="checkmark-circle-fill" size="40"></u-icon><text class="pr" style="left:5rpx;top:-6rpx;">已存入{{userInfo.virtual_coin_name}}余额</text></view>
			  </view>
			  
			  <!-- 失败显示-->
			  <view v-else-if="progressRed == 3" class="pa f40" style="left:0;top:300rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
			  		<view class="f28" style="text-align: center;color:#ccc;">
						  <text class="mr20">来自</text>
						  <image :src="sendRedUser.offer_pic" class="pr"
						  style="height: 50rpx;width:50rpx;border-radius: 50%;top:13rpx;right:3rpx;"></image>
						  <text class="toell pr" style="display: inline-block;max-width: 200rpx;top:8rpx">{{sendRedUser.offer_name}}</text> 
						  <text class="ml20">的红包</text>
			  		</view>
					<view class="mt50" style="font-size: 50rpx;">手慢了</view>
			  		<view class="mt50 colccc f32"><text class="pr" style="left:5rpx;top:-6rpx;">红包领取已超时</text></view>
			  </view>
			  
			  <image :src="progressRed == 2 || progressRed == 3  ? '/static/image/open_red2.png' : '/static/image/open_red.png'" style="width: 560rpx;" mode="widthFix"></image>
			</view>
		</view>
		
		<!--我已领取的红包-->
		<u-mask :show="robShowMask2" z-index="1"></u-mask>
		<view v-if="robShowMask2" class="pf" style="width: 560rpx;left:100rpx;top:25%;z-index: 2;">
			<view class="pr">
			  <view class="pa f40" style="left:0;top:50rpx;text-align: center;color:#66666;z-index: 3;width: 100%;">
			     {{userInfo.virtual_coin_name}}
			  </view>	
			  
			  <!--关闭按钮-->
			  <view class="pa" style="width: 100%;left:0;top:50rpx;text-align: center;z-index: 3;text-align: right;padding-right: 30rpx;">
			  	<view @click="closeRobShowMask" style="display: inline;color:#666666;"><u-icon name="close" size="40"></u-icon></view>
			  </view>
			  <view class="pa f40" style="left:0;top:320rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
					<view class="f28" style="text-align: center;color:#ccc;">
						  <text class="mr20">来自</text>
						  <image :src="sendRedUser2.offer_pic" class="pr"
						  style="height: 50rpx;width:50rpx;border-radius: 50%;top:13rpx;right:3rpx;"></image>
						  <text class="toell pr" style="display: inline-block;max-width: 200rpx;top:8rpx">{{sendRedUser2.offer_name}}</text>
						  <text class="ml20">的红包</text>
					</view>
					<view class="mt30" style="font-size: 100rpx;">{{sendRedUser2.amount}}</view>
					<view class="mt50 colccc f32"><u-icon name="checkmark-circle-fill" size="40"></u-icon><text class="pr" style="left:5rpx;top:-6rpx;">已存入{{userInfo.virtual_coin_name}}余额</text></view>
			  </view>
			  <image src="/static/image/open_red2.png" style="width: 560rpx;" mode="widthFix"></image>
			</view>
		</view>
		
		<!--群成员或对方已领取的红包-->
		<u-mask :show="robShowMask4" z-index="1"></u-mask>
		<view v-if="robShowMask4" class="pf" style="width: 560rpx;left:100rpx;top:25%;z-index: 2;">
			<view class="pr">
			  <view class="pa f40" style="left:0;top:50rpx;text-align: center;color:#66666;z-index: 3;width: 100%;">
			     {{userInfo.virtual_coin_name}}
			  </view>	
			  
			  <!--关闭按钮-->
			  <view class="pa" style="width: 100%;left:0;top:50rpx;text-align: center;z-index: 3;text-align: right;padding-right: 30rpx;">
			  	<view @click="closeRobShowMask" style="display: inline;color:#666666;"><u-icon name="close" size="40"></u-icon></view>
			  </view>
			  <view class="pa f40" style="left:0;top:320rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
					<view class="f28" style="text-align: center;color:#ccc;">
						  <text class="mr20">来自</text>
						  <image :src="sideredsource.offer_pic" class="pr"
						  style="height: 50rpx;width:50rpx;border-radius: 50%;top:13rpx;right:3rpx;"></image>
						  <text class="toell pr" style="display: inline-block;max-width: 200rpx;top:8rpx">{{sideredsource.offer_name}}</text>
						  <text class="ml20">的红包</text>
					</view>
					<view class="mt30" style="font-size: 100rpx;">{{sideredsource.amount}}</view>
					<view class="mt50 colccc f32">
						<u-icon name="checkmark-circle-fill" size="40"></u-icon>
						<text class="pr" style="left:5rpx;top:-6rpx;">对方已存入{{userInfo.virtual_coin_name}}余额</text>
					</view>
			  </view>
			  <image src="/static/image/open_red2.png" style="width: 560rpx;" mode="widthFix"></image>
			</view>
		</view>
		
		<!--查看自已发出的红包-->
		<u-mask :show="robShowMask3" z-index="1"></u-mask>
		<view v-if="robShowMask3" class="pf" style="width: 560rpx;left:100rpx;top:25%;z-index: 2;">
			<view class="pr">
			  <view class="pa f40" style="left:0;top:50rpx;text-align: center;color:#66666;z-index: 3;width: 100%;">
			     {{userInfo.virtual_coin_name}}
			  </view>	
			  
			  <!--关闭按钮-->
			  <view class="pa" style="width: 100%;left:0;top:50rpx;text-align: center;z-index: 3;text-align: right;padding-right: 30rpx;">
			  	<view @click="closeRobShowMask" style="display: inline;color:#666666;"><u-icon name="close" size="40"></u-icon></view>
			  </view>
			  <view class="pa f40" style="left:0;top:320rpx;text-align: center;color:#fff;z-index: 3;width: 100%;">
					<view class="f38" style="text-align: center;color:#ccc;">
						  <text class="toell pr" style="display: inline-block;max-width: 350rpx;top:8rpx">{{mySendOneRed.title}}</text>
					</view>
					<view class="mt30" style="font-size: 100rpx;">{{mySendOneRed.amount}}</view>
					<view v-if="mySendOneRed > 1" class="mt50 colccc f32">
						红包数量({{mySendOneRed.receive_num}}/{{mySendOneRed.num}})
					</view>
					<view v-else class="mt50 colccc f32">
						<view v-if="mySendOneRed.receive_num > 0">
						   <u-icon name="checkmark-circle-fill" size="40"></u-icon>
						   <text class="pr" style="left:5rpx;top:-6rpx;">对方已领取</text>
						</view>
						<view v-else>
						   <text class="pr" style="left:5rpx;top:-6rpx;">等待对方领取</text>
						</view>
					</view>
			  </view>
			  <image src="/static/image/open_red2.png" style="width: 560rpx;" mode="widthFix"></image>
			</view>
		</view>
			
		<!--我的收藏-->
		<u-popup v-model="showCollectionList" mode="bottom" border-radius="14" height="90%" :closeable="true">
			<view class="mt30 b f34 bbo pb20 popup-title" style="z-index: 1;"><text class="ml30">我的收藏</text></view>
			<view style="height: 47px;"></view>
			<view class="p20">
				<view v-if="collentionList.length <= 0" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				
				<view v-for="(item,index) in collentionList" :key="index" class="bbo">
					
					<view v-if="item.type == 0" class="f32 pv20">{{item.content}}</view><!--文本-->
					
					<view v-else-if="item.type == 1" class="f32 pv20"><!--图片-->
						<image @click="openImage" :data-src="item.content" :src="item.content" mode="heightFix" style="height: 50px;"></image>
					</view>
					
					<view v-else-if="item.type == 2" class="pr" @click.stop="playVideo" :data-url="item.video.videoUrl" :style="'height: '+(item.video.thumbH*0.5)+'rpx;width: '+(item.video.thumbW*0.5)+'rpx;'">
						<image :src="item.video.thumb" class="pa" style="width: 100%;height: 100%;z-index:0;top:0;left:0;" ></image>
						<view class="pa" :style="'display: inline-block;top:'+((item.video.thumbH*0.5)/2-50)+'rpx;left:'+((item.video.thumbW*0.5)/2-50)+'rpx;'">
							<u-icon name="bofangshipin" custom-prefix="qxl-icon" color="#ffffff" size="100"></u-icon>
						</view>
						<view class="pa f30" style="bottom: 20rpx;width: 100%;right: 20rpx;color:#fff;text-align: right;">{{item.video.time}}</view>
					</view>
					
					<view class="disfr-lr f30 pb20 col999 mt20">
						<view>{{item.add_time_str}}</view>
						<view @click="sendColl" :data-index="index"><u-icon name="checkbox-mark"></u-icon>发送</view>
						<view @click="deleteColl" :data-index="index"><u-icon name="close"></u-icon>删除</view>
					</view>
				</view>
				
				<view style="height: 20px;"></view>
				<view v-if="next_page && collentionList.length > 0" @click="LoadMore" class="mv20 my_button pv15 f28" style="text-align: center;">
					加载更多
				</view>
				<view style="height: 20px;"></view>
			</view>
		</u-popup>
	    <!-- 视频播放器（隐藏状态） -->
	      <video
	        id="fullscreenVideo"
	        :src="currentVideoUrl"
	        style="width:0;height:0;"
	        :controls="true"
	        :show-fullscreen-btn="false"
	        :show-center-play-btn="false"
	        @fullscreenchange="onFullscreenChange"
	      ></video>			
	</view>	
</template>

<script setup>
import { ref, getCurrentInstance ,nextTick } from 'vue';
const { instance  } = getCurrentInstance(); // 相当于vue2 this

import {onLoad,onShow,onHide,onUnload} from '@dcloudio/uni-app';
import {  watch } from 'vue';
import DomVideoPlayer from 'uniapp-video-player';
const not_load=ref(true);
const load_page=ref(false);
const title=ref('加载中...');
const isVoice=ref(false);
const text=ref('');
const showMore=ref(false);
const blur=ref(false);
const toUserId=ref('');
const userProfile=ref({});
const send_load=ref(false); //正在发送消息加载中...
// 获取用户资料
const getUserProfile=async()=>{
	let userID=uni.$vuex.state.globalData.user.user_id;
	userID=userID.toString();
	let list=await uni.TIM.getUserProfile([userID]);
	userProfile.value=list[0];
};
//复制文本消息
const copyInfo=(e)=>{
	let text=e.currentTarget.dataset.text;
	uni.setClipboardData({
	  data: text,
	  success: function (res) {
	    uni.getClipboardData({
	      success: function (res) {
	         uni.$utils.showToast('复制成功');
	      }
	    })
	  }
	})
};

// 跳转个人主页
const toUserHome=(e)=>{
	let to=toUserId.value;
	let uri='/pages/user-home/user-home?privateChat=1&user_id='+to+'&tencent_group_id=';
	uni.$utils.goPage(uri);
	//console.log('toUserId',uri);
};
// 关闭所有
const closeAllShow=()=>{
	showIndex.value=-1;
	topDropDownShow.value=false;
};
//打开语音或文本输入
const showVoices=()=>{
	isVoice.value=isVoice.value ? false : true;
	showMore.value=false;
};

//onShow是否执行，false执行，true 否
const isOpenResources=ref(false);

/////////////////////////////////////////
//长按开始录音[发送语音消息]
const recorderManager=ref();
const onLongpress=(e)=>{
	recorderManager.value=uni.TIM.createAudioMessage(0,toUserId.value,function(){
		nextReqMessageID.value=false;
		isCompleted.value=false;
		text.value='';
		getMessageList();
	},()=>{
		send_load.value=true;
	});
	showMore.value=false;
}
// 松开停止录音
const onTouchend=(e)=>{
	recorderManager.value.stop();
}

//发送提交
const submit=()=>{
	let content=text.value;
	content=uni.$utils.filterInput(content);
	if(!content) {
		text.value='';
		uni.$utils.showToast('不支持的字符');
		return;
	}
	//send_load.value=true;
	uni.TIM.createTextMessage(0,toUserId.value,content,(data)=>{
		/*uni.$utils.showToast('消息发送成功',0,()=>{
			uni.navigateBack({data:1});
		});*/
		nextReqMessageID.value=false;
		isCompleted.value=false;
		text.value='';
		getMessageList();
	});
	console.log(toUserId.value);
}
// 发送图片
const createImageMessage=(e)=>{
	let type=e.currentTarget.dataset.type;
	showMore.value=false;
	isOpenResources.value=true;
	uni.chooseImage({
		count: 9, // 最多9张
		sourceType:[type],
		success: async (res) => {
			send_load.value=true;
			const tempFiles = res.tempFiles;
			//console.log(tempFiles);return;
			uni.TIM.createImageMessage(0,toUserId.value,res,(data)=>{
				nextReqMessageID.value=false;
				isCompleted.value=false;
				text.value='';
				setTimeout(()=>{
					getMessageList();
				},3000)
				
			});
		}
	});
};
//打开消息图片
const openImage=(e)=>{
	isOpenResources.value=true;
	let src=e.currentTarget.dataset.src;
	uni.previewImage({
		current: src,
		urls: [src]
	})		
};
//发送视频
const chooseMedia=()=>{
	isOpenResources.value=true;
	showMore.value=false;
	wx.chooseMedia({
		mediaType: ['video'], // 视频
		sourceType: ['camera'], // 来源相册或者拍摄
		maxDuration: 60, // 设置最长时间60s
		camera: 'back', // 后置摄像头
		success(res){
			send_load.value=true;
			uni.TIM.createVideoMessage(0,toUserId.value,res,(data)=>{
				nextReqMessageID.value=false;
				isCompleted.value=false;
				text.value='';
				setTimeout(()=>{
					getMessageList();
				},3000)
				
			});
		}
	});
};
// 播放语音
const audioContext=uni.createInnerAudioContext();
const playIndex=ref(-1);
const playVoice=(e)=>{
	let index=e.currentTarget.dataset.index;
	if(playIndex.value == index){
		playIndex.value=-1;
		audioContext.stop();
		return;
	}
	playIndex.value=index;
	let url=uni.$vuex.state.globalData.messageList[index].payload.url;
	audioContext.loop=false;
	audioContext.src=url;
	audioContext.stop();
	audioContext.play();
	audioContext.onEnded(()=>{
		playIndex.value=-1;
	});
};

//发红包
const showSendRedEnvelope=ref(false);
const userInfo=ref({});
const sendRedUser=ref({});
const sendRedEnvelope = async()=>{
	showSendRedEnvelope.value=true;
};
//发红包表单提交
const sendRedEnvelopeForm=async(e)=>{
	let form=e.detail.value;
	if(!form.title) form.title=userInfo.value.virtual_coin_name+'到了';
	form.title=uni.$utils.filterInput(form.title);
	if(!form.title){
		uni.$utils.showToast('无效字符');
		return;
	}
	form.title=uni.$utils.clearSpace(form.title);
	if(!form.amount){
		uni.$utils.showToast(userInfo.value.virtual_coin_name+'必填');
		return;
	}
	if(isNaN(form.amount) || form.amount <= 0){
		uni.$utils.showToast(userInfo.value.virtual_coin_name+'格式错误');
		return;
	}
	form.amount=parseInt(form.amount);
	if(form.amount > userInfo.value.my_virtual){
		uni.$utils.showToast(userInfo.value.virtual_coin_name+'数量不足');
		return;
	}
	let post={
		title:form.title,
		type:3,
		num:1,
		amount:form.amount,
		group_id:0,
		exclusive_id:userInfo.value.other_side.id
	};
	send_load.value=false;
	// 先发红包 
	let ret=await uni.$post('/appapi-redpacket-send',{},post);
	let red_packet_id=0;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	red_packet_id=ret.data.id;
	//先发送IM
	let imText=uni.$appConfig['IM_PREFIX_MAKR']['fa_hong_bao']['rule']+form.title+uni.$appConfig['RED_NUMBER']+form.amount+uni.$appConfig['RED_NUMBER']+red_packet_id;
	uni.TIM.createTextMessage(0,toUserId.value,imText,(data)=>{
		nextReqMessageID.value=false;
		isCompleted.value=false;
		text.value='';
		showSendRedEnvelope.value=false;
		showMore.value=false;
		setTimeout(()=>{
			getMessageList();
		},1000)
	});
};
//查看我发出的红包
const mySendOneRed=ref({});
const myReceiveRed=async(e)=>{
	let red_packet_id=e.currentTarget.dataset.red_packet_id;
	let ret = await uni.$get('/appapi-redpacket-mysendreds',{red_packet_id:red_packet_id});
	console.log(ret);
	mySendOneRed.value=ret.data;
	robShowMask3.value=true;
};
//领取红包
const robShowMask=ref(false);
const robShowMask2=ref(false);
const robShowMask3=ref(false);
const robShowMask4=ref(false);
const receiveRed=async(e)=>{
	let flow =e.currentTarget.dataset.flow; // in 对主，out 自已
	let number = e.currentTarget.dataset.number; // 红包金额
	let red_packet_id = e.currentTarget.dataset.red_packet_id; // 红包ID
	let title = e.currentTarget.dataset.title; // 红包标题
	let type = e.currentTarget.dataset.type; // 红包类型：C2C点对点，否则群红包
	let offer_name=e.currentTarget.dataset.offer_name; // 发红包者
	let offer_pic=e.currentTarget.dataset.offer_pic; // 发红包者头像
	if(type == 'C2C' && flow == 'out'){ // 点对点红包，并且是自已发出的
		return;
	}
	robShowMask.value=true;
	red_id.value=red_packet_id;
	let ret=await uni.$get('/appapi-redpacket-myredpackerdec',{id:red_packet_id});
	console.log(ret);
	let asvalue=antiShake.value;
	if(ret.data.id) {
		progressRed.value=2;
		asvalue[red_packet_id]=ret.data.amount;
		antiShake.value=asvalue;
		redAmount.value=ret.data.amount;
		sendRedUser.value.offer_name=ret.data.offer_name;
		sendRedUser.value.offer_pic=ret.data.offer_pic;
		return;
	}
	sendRedUser.value.offer_name=offer_name;
	sendRedUser.value.offer_pic=offer_pic;
	progressRed.value=0;
};
//领取红包表单提交
const red_id=ref(null);
const progressRed=ref(0); // 0领取进度，1领取成功，2领取失败
const antiShake=ref({});
const redAmount=ref(0);
const robFormTim=ref(null);
const setTimer=ref(null);
const robForm=async ()=>{
	if(progressRed.value == 1) return;
	let red_packet_id=red_id.value;
	if(!red_packet_id){
		uni.$utils.showToast('红包异常');
		return;
	}
	// 先判断是否已领取过这个红包
	let asvalue=antiShake.value;
	if(asvalue[red_packet_id]) {
		redAmount.value=asvalue[red_packet_id];
		return;
	}
	let ret=await uni.$get('/appapi-redpacket-myredpackerdec',{id:red_packet_id});
	if(ret.data.id) {
		progressRed.value=2;
		asvalue[red_packet_id]=ret.data.amount;
		sendRedUser.value.offer_name=ret.data.offer_name;
		sendRedUser.value.offer_pic=ret.data.offer_pic;
		return;
	}
	let httpGet= async ()=>{
		let data=await uni.$get('/appapi-redpacket-receive',{red_packet_id:red_packet_id});
		console.log(data);
		if(data.error_code == -64100){
			clearInterval(robFormTim.value);
			robFormTim.value=setInterval(()=>{
				httpGet();
			},2000);
			return;
		}
		if(!data.data.amount){
			progressRed.value=3;
			return;
		}
		asvalue[red_packet_id]=data.data.amount;
		redAmount.value=data.data.amount;
		progressRed.value=2;
		// 发送IM信息
		let imText=uni.$appConfig['IM_PREFIX_MAKR']['shou_hong_bao']['rule']+data.data.name+uni.$appConfig['RED_NUMBER']+data.data.amount+uni.$appConfig['RED_NUMBER']+red_packet_id;
		console.log(imText);
		uni.TIM.createTextMessage(0,toUserId.value,imText,(data)=>{
			nextReqMessageID.value=false;
			isCompleted.value=false;
			text.value='';
			showSendRedEnvelope.value=false;
			showMore.value=false;
			setTimeout(()=>{
				getMessageList();
			},1000)
		});
	};
	progressRed.value=1;
	clearTimeout(setTimer.value);
	setTimer.value = setTimeout(()=>{
		httpGet();
	},3000);
};
//显示已收红包
const sendRedUser2=ref({});
const showRed=async(e)=>{
	 let red_packet_id=e.currentTarget.dataset.red_packet_id;
	robShowMask2.value=true;
	red_id.value=red_packet_id;
	let ret=await uni.$get('/appapi-redpacket-myredpackerdec',{id:red_packet_id});
	sendRedUser2.value.amount=ret.data.amount;
	sendRedUser2.value.offer_name=ret.data.offer_name;
	sendRedUser2.value.offer_pic=ret.data.offer_pic;
};
//查看对方领取的红包
const sideredsource=ref({});
const showSideRed=async(e)=>{
	let red_packet_id=e.currentTarget.dataset.red_packet_id;
	let amount=e.currentTarget.dataset.number;
	robShowMask4.value=true;
	let ret=await uni.$get('/appapi-redpacket-sideredsource',{red_packet_id:red_packet_id});
	console.log('showSideRed',ret.data);
	ret.data.amount=amount;
	sideredsource.value=ret.data;
};
// 关闭领取红包弹层
const closeRobShowMask=()=>{
	robShowMask.value=false;
	robShowMask2.value=false;
	robShowMask3.value=false;
	robShowMask4.value=false;
	clearTimeout(setTimer.value);
	clearInterval(robFormTim.value);
};
//点击工具包
const onMore=()=>{
	showMore.value=!showMore.value;
	
}

//输入框选中事件
const onFocus=()=>{
	showMore.value=false;
	//blur.value=false;
}

//输入框失去焦点
const onBlur=()=>{
	blur.value=true;
}

onLoad(async (options)=>{
	//标记已读
	if(options.conversationID) uni.TIM.setMessageRead(options.conversationID);
	isOpenResources.value=false;
	let nick=options.nick ? decodeURIComponent(options.nick) : '';
	title.value=nick ? uni.$utils.substr(nick,12,'...') : '';
	conversationID.value=options.conversationID;
	toUserId.value=options.to;
	uni.$vuex.state.globalData.currentConversId=conversationID.value;
	not_load.value=false;
	let ret=await uni.$get('/appapi-redpacket-getuserinfo',{type:0,id:toUserId.value});
	not_load.value=true;
	userInfo.value=ret.data;
	uni.$vuex.state.globalData.user.nickname=ret.data.current_user_nickname;
	uni.$vuex.state.globalData.user.head_pic=ret.data.current_user_head_pic;
	uni.getSystemInfo({
		success: (res) => {
		      //scrollHeight.value = res.windowHeight - 50 // 减去其他UI元素高度 
			  systemInfo.value=res;
			  scrollHeight.value=res.windowHeight - 120 ;//- 140;
			  //console.log('scrollHeight.value',scrollHeight.value);
			  //console.log(res);
		}
	});
	getUserProfile();
	console.log('opportunity_id',options.opportunity_id);
	// 从商机详情私聊[自动回复]
	if(options.opportunity_id){
		let ret = await uni.$get('/appapi-config-automaticreply',{send_id:options.to,opportunity_id:options.opportunity_id});
		console.log(ret);
	}
});

onShow(()=>{
	//console.log('onShow isOpenResources',isOpenResources.value);
	if(isOpenResources.value === true){
		isOpenResources.value=false;
		return;
	}
	uni.$vuex.state.globalData.currentConversId=conversationID.value;
	isCompleted.value=false;
	nextReqMessageID.value=false;
	uni.$vuex.state.globalData.messageList=[];
	getMessageList();
});
onHide(()=>{
    clearInterval(robFormTim.value);
	clearTimeout(setTimer.value);
});
onUnload(()=>{
	uni.$vuex.state.globalData.currentConversId='';
	uni.$vuex.state.globalData.messageList=[];
	clearInterval(robFormTim.value);
	clearTimeout(setTimer.value);
});

const conversationID=ref('');
// 拉取消息列表
const nextReqMessageID=ref('');
//是否分页已拉取完成
const isCompleted=ref(false);
//消息列表
const messageList =ref([]);
const scrollTop=ref(99999);
const scrollHeight = ref(0); // 滚动区域高度
const getMessageList=async ()=>{
	if(!uni.$vuex.state.globalData.imLoginStatus) return;
	send_load.value=false;
	let isPage= nextReqMessageID.value;
	let ret=await uni.TIM.getMessageList(conversationID.value,nextReqMessageID.value);
	load_page.value=false;
	// 下一页的ID
	nextReqMessageID.value=ret.nextReqMessageID;
	//表示是否已经拉完所有消息。isCompleted 为 true 时，nextReqMessageID 为 ""
	isCompleted.value=ret.isCompleted;
	//列表
	if(isPage){
		uni.$vuex.state.globalData.messageList=[...uni.$vuex.state.globalData.messageList,...ret.messageList];
	}else{
		uni.$vuex.state.globalData.messageList=ret.messageList.reverse();
	}
};
const onScrollTop=ref(0);
const onScroll=(e)=>{
	//console.log(e.detail.scrollTop);
	uni.$vuex.state.globalData.scrollTopValue=e.detail.scrollTop;
	if(e.detail.scrollTop <= 5){
		uni.$vuex.state.globalData.showToBottom=false;
		uni.$vuex.state.globalData.scrollTopValue=0;
	}
	showIndex.value=-1;
	if(scrollTop.value <= 0){
		scrollTop.value=e.detail.scrollTop;
		uni.$vuex.state.globalData.showToBottom=false;
		uni.$vuex.state.globalData.scrollTopValue=0;
	}
}

// 滚动条到顶部事件
const onToupper=(e)=>{
	if(isCompleted.value) return;
	if(load_page.value) return;
	load_page.value=true;
	
	setTimeout(()=>{
		getMessageList();
	},2000);
	//console.log('onToupper',e)
}
// 滚动底部
const toBttom=()=>{
	scrollTop.value=0;
	console.log(scrollTop.value);
};
///////////////////////////////
//顶部右边菜单
const topDropDownShow=ref(false);
const topDropDown=()=>{
	topDropDownShow.value=!topDropDownShow.value;
};

//消息长按事件///////////////////
//长按显示更多工具内容
const timeout=ref(null);
const showIndex=ref(-1);
const listToolStyle=ref('');
const systemInfo = uni.getSystemInfoSync();
const handleTouchStart=(e)=>{
      // 清除之前的定时器（如果有的话）并设置一个新的定时器，用于判断是否为长按
      clearTimeout(timeout.value);
      timeout.value = setTimeout(() => {
         handleLongPress(e); // 长按事件处理函数
      }, 500); // 假设长按的判定时间为500毫秒
    };
const handleTouchEnd=()=>{
      // 用户手指离开屏幕时清除定时器，避免误判为长按
      clearTimeout(timeout.value);
}
const toolsData=ref({});
const handleLongPress=(e)=>{
	  let clientX=e.touches[0].clientX;
	  let clientY=e.touches[0].clientY;
	  let index=e.currentTarget.dataset.index;
	  toolsData.value=uni.$vuex.state.globalData.messageList[index];
	  toolsData.value.consmIndex=index;
	  if(toolsData.value.status == 'fail') return;
	  showIndex.value=1;
	  let top = systemInfo.platform == 'ios' ? 44 : 48;
	  let windowWidth=systemInfo.windowWidth;
	  let windowHeight=systemInfo.windowHeight-top;
	  let touches= e.touches[0];
	  let style='';
	  if (touches.clientY > (windowHeight / 2)) {
	     style = 'top:'+(clientY-190)+'px;';
	    } else {
	      style = 'top:'+(clientY)+'px;';
	  }
	   let left=clientX-100;
	   if(left < 90) left=90;
	   style += 'left:'+(left)+'px;';
	   listToolStyle.value=style;
};
///////////////////////////////
//收藏消息
const collect=async(e)=>{
	let id=e.currentTarget.dataset.id;
	let type=e.currentTarget.dataset.type;
	let text=e.currentTarget.dataset.text;
	let image=e.currentTarget.dataset.image;
	
	let video=e.currentTarget.dataset.video;
	let videoThumb=e.currentTarget.dataset.videoThumb;
	if(!videoThumb) videoThumb='-';
	let videoThumbWidth=e.currentTarget.dataset.videoThumbWidth;
	if(!videoThumbWidth) videoThumbWidth=0;
	let videoThumbHeight=e.currentTarget.dataset.videoThumbHeight;
	if(!videoThumbHeight) videoThumbHeight=0;
	let videoTime=e.currentTarget.dataset.videoTime;
	if(!videoTime) videoTime='00:00';
	
	let toType=0;
	if(type == 'TIMImageElem') {
		text= image;
		toType=1;
	}else if(type == 'TIMVideoFileElem'){
		let makr=uni.$appConfig['VIDEO_COLLECT_MAKR'];
		text= video+makr+videoThumb+makr+videoThumbWidth+makr+videoThumbHeight+makr+videoTime;
		toType=2;
	}else if(type == 'fa_tu_pian'){ // 自定义的图片
		toType=1;
	}else if(type == 'fa_shi_pin'){ // 自定义的视频
		toType=2;
	}
	let post={
		chat_id:id,
		type:toType,
		content:text
	};
	//console.log(text);return;
	let ret=await uni.$post('/appapi-chatcollection-write',{},post);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast('收藏成功');
};
//删除消息
const deleteMessage=(e)=>{
	uni.$utils.showModal('操作不可恢复，确认删除？',1,()=>{
		let id=e.currentTarget.dataset.id;
		let index=e.currentTarget.dataset.index;
		//console.log(id);return;
		uni.$vuex.state.globalData.messageList[index].isDeleted=true;
		uni.TIM.deleteMessage([uni.$vuex.state.globalData.messageList[index]],(data)=>{
			
		});
	});
};
//撒回消息
const revokeMessage=(e)=>{
	let id=e.currentTarget.dataset.id;
	let index=e.currentTarget.dataset.index;
	//console.log(id);return;
	uni.TIM.revokeMessage(uni.$vuex.state.globalData.messageList[index],(data)=>{
		uni.$vuex.state.globalData.messageList[index].isRevoked=true;
	});
};
//我的收藏 
const showCollectionList=ref(false);
const next_page=ref('');
const collentionList=ref([]);
const getCollectionList=async()=>{
	let ret=await uni.$get('/appapi-chatcollection-getlist',{});
	ret.data.list=peelecs(ret.data.list);
	next_page.value=ret.data.next_page;
	collentionList.value=ret.data.list;
	showCollectionList.value=true;
	console.log(collentionList.value);
};
//发送收藏内容
const sendColl=async(e)=>{
	let index = e.currentTarget.dataset.index;
	let data = collentionList.value[index];
	let imText=data.content;
	if(data.type == 1){
		imText=uni.$appConfig['IM_PREFIX_MAKR']['fa_tu_pian']['rule']+imText;
	}else if(data.type == 2){
		imText=uni.$appConfig['IM_PREFIX_MAKR']['fa_shi_pin']['rule']+imText;
	}
	showCollectionList.value=false;
	showMore.value=false;
	uni.TIM.createTextMessage(0,toUserId.value,imText,(data)=>{
		nextReqMessageID.value=false;
		isCompleted.value=false;
		text.value='';
		showSendRedEnvelope.value=false;
		showMore.value=false;
		setTimeout(()=>{
			getMessageList();
		},1000)
	});
};
//删除收藏
const deleteColl=async(e)=>{
	uni.$utils.showModal('操作不可恢复，确认执行？',1,async()=>{
		let index = e.currentTarget.dataset.index;
		let data = collentionList.value[index];
		let ret=await uni.$get('/appapi-chatcollection-del',{ids:data.id});
		if(ret.error_code != 0) {
			uni.$utils.showToast(ret.info);
			return;
		}
		let list=collentionList.value;
		list.splice(index, 1);
	});
};
//更载更多
const LoadMore=async()=>{
	if(!next_page.value) return;
	let ret=await uni.$get('/appapi-chatcollection-getlist',next_page.value);
	next_page.value=ret.data.next_page;
	if(ret.data.list.length > 0){
		ret.data.list=peelecs(ret.data.list);
		collentionList.value=[...collentionList.value,...ret.data.list];
	}
};
//解析收藏的数据
const peelecs=(list)=>{
	let makr=uni.$appConfig['VIDEO_COLLECT_MAKR'];
	for(let i in list){
		if(list[i].type == 2){
			let content=(list[i].content).toString();
			let test=content.split(makr);
			let temp={};
			temp.videoUrl=test[0];
			temp.thumb=test[1];
			temp.thumbW=test[2];
			temp.thumbH=test[3];
			temp.time=uni.$utils.formatSeconds(test[4]);
			list[i].video=temp;
		}else{
			list[i].video={};
		}
	}
	return list;
};
// 播放视频
const currentVideoUrl = ref(''); // 当前播放的视频地址
const playVideo = (e) => {
  // 获取 data-url 属性值
  const url = e.currentTarget.dataset.url;
  
  // 设置当前播放地址
  currentVideoUrl.value = url;
  
  // 使用 nextTick 确保 DOM 更新
  nextTick(() => {
    // 获取视频上下文
    const videoContext = uni.createVideoContext('fullscreenVideo');
    // 播放并进入全屏
    videoContext.play();
    videoContext.requestFullScreen({ direction: 0 }); // 横屏全屏
  });
};
//发微信,发抖音，发快手
const sendAccount=async(e)=>{
	let name=e.currentTarget.dataset.name;
	let ret=await uni.$get('/appapi-member-setuser');
	showMore.value=false;
	let title='';
	if(name == 'wei_xin') title='微信号:';
	else if(name == 'dou_yin') title='抖音号:';
	else if(name == 'kuai_shou') title='快手号:';
	let content=ret.data[name];
	if(!content){
		uni.$utils.goPage('/pages/user-data/user-data');
		return;
	}
	uni.TIM.createTextMessage(0,toUserId.value,title+content,(data)=>{
		/*uni.$utils.showToast('消息发送成功',0,()=>{
			uni.navigateBack({data:1});
		});*/
		nextReqMessageID.value=false;
		isCompleted.value=false;
		text.value='';
		getMessageList();
	});
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(e){
	uni.$utils.dataSetPage(e);
};
</script>

<style lang="scss">
page{
	background: #f5f5f5;
	height: 100%;
}

.content{
	margin:0rpx 20rpx;
	height: 100%;
	.scroll-Y {
		height: 100%;
		transform: scaleY(-1);
	}
	::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}
	
	.item.left{
		margin-bottom:40rpx;
		transform: scaleY(-1);
		.time{
			font-size:24rpx;
			color:#999;
			height:60rpx;
			line-height: 60rpx;
			text-align: center;
		}
		.chat{
			display: flex;
		}
		.pictrue{
			flex-shrink: 0;
			width:100rpx;
			height:100rpx;
			overflow: hidden;
			border-radius: 10rpx;
			margin-right: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			.name{
				font-size:24rpx;
				color:#666;
			}
			.content-info{
				padding:20rpx;
				background:#fff;
				margin-top: 10rpx;
				border-radius: 10rpx;
				position: relative;
				max-width: 500rpx;
				word-wrap:break-word; 
				word-break:break-all;
			}
			.content-info::after{
				content: '';
				position: absolute;
				background: #fff;
				width:20rpx;
				height:20rpx;
				transform: rotate(45deg);
				left:-10rpx;
				top:30rpx;
			}
			.text-image{
				min-width: 200rpx;
				max-width: 450rpx;
				height: auto;
				margin-top: 10rpx;
			}
		}
	}
	
	.item.right{
		transform: scaleY(-1);
		margin-bottom:40rpx;
		.time{
			font-size:24rpx;
			color:#999;
			height:60rpx;
			line-height: 60rpx;
			text-align: center;
		}
		.chat{
			display: flex;
			justify-content: flex-end;
		}
		.pictrue{
			flex-shrink: 0;
			width:100rpx;
			height:100rpx;
			overflow: hidden;
			border-radius: 10rpx;
			margin-left: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			.name{
				font-size:24rpx;
				color:#666;
				text-align: right;
			}
			.content-info{
				padding:20rpx;
				background:#aaff00;
				margin-top: 10rpx;
				border-radius: 10rpx;
				position: relative;
				max-width: 500rpx;
				word-wrap:break-word; 
				word-break:break-all;
			}
			.content-info::after{
				content: '';
				position: absolute;
				background: #aaff00;
				width:20rpx;
				height:20rpx;
				transform: rotate(45deg);
				right:-10rpx;
				top:30rpx;
			}
			.text-image{
				min-width: 200rpx;
				max-width: 450rpx;
				height: auto;
				margin-top: 10rpx;
			}
		}
	}
	
	
	.fun{
		position: fixed;
		bottom: 0rpx;
		left:0;
		width: 100%;
		height:120rpx;
		transition: all 0.5s;
		background-color: #f5f5f5;
		.line{
			width: 100%;
			height: 1px;
			background:#999;
			transform: scaleY(0.1);
		}
		.f-b{
			height: 100%;
			display: flex;
			align-items: center;
			padding:0rpx 20rpx;
			.icon{
				width:60rpx;
				height:60rpx;
			}
			.icon2{
				width:60rpx;
				height:60rpx;
			}
			.input{
				width: 550rpx;
				padding:0rpx 10rpx;
				background:#f4f4f4;
				height:78rpx;
				border-radius: 10rpx;
				margin:0rpx 20rpx;
				display: flex;
				align-items: center;
				transition: all 0.5s;
				input{
					width: 100%;
				}
			}
			.input.w{
				width: 480rpx;
			}
			.on-voice{
				width: 550rpx;
				padding:0rpx 10rpx;
				background:#fff;
				height:78rpx;
				border-radius: 10rpx;
				margin:0rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.on-voice:active{
				background:#ccc;
			}
			.submit{
				padding:10rpx 28rpx;
				background-color: #07C160;
				border-radius: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				color:#fff;
			}
		}
	}
	.fun.top{
		bottom: 300rpx;
	}
	.more-box{
		position: fixed;
		height: 300rpx;
		width: 100%;
		bottom:0rpx;
		left:0;
		background: #ffffff;
		transition: all 0.5s;
		box-sizing: border-box;
		padding-top:10rpx;
		display: flex;
		flex-wrap: wrap;
		.line{
			width: 100%;
			height: 1px;
			background:#999;
			transform: scaleY(0.1);
			position: absolute;
			left:0;
			top:-1;
		}
		.item{
			width:25%;
			text-align: center;
			
			.icon-b{
				width:100rpx;
				height:100rpx;
				background:#fff;
				border-radius: 10rpx;
				margin:20rpx auto;
				display:flex;
				align-items: center;
				justify-content: center;
			}
			.text{
				font-size:24rpx;
				color:#666;
			}
		}
		.item:active .icon-b{
			background:#ccc;
		}
	}
	.bottom{
		background: #f5f5f5;
		bottom:-300rpx;
	}
}
.overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 16px;
}
image{
	will-change:transform;
	width:auto;
	height:auto
}
/* 顶部弹跳出层 */
.slot-wrap-right{margin-top: 5px;}
.slot-wrap-right .plus_mores{
	right:8rpx;
	height: 140px;
	width:120px;
	background:#222;
	z-index:9999;
	border-radius: 4px;
}
.slot-wrap-right .triangle-up {
	position: absolute;
	right: 10px;
	top:-8px;
	width: 0; /* 伪元素宽度 */
	height: 0; /* 伪元素高度 */
	border-left: 7px solid transparent; /* 左边框透明 */
	border-right: 7px solid transparent; /* 右边框透明 */
	border-bottom: 10px solid #333; /* 底部边框为三角形颜色和大小 */
}
/*对方发出红包*/
.form-send-red{
	background: none !important;
	padding: 0 !important;
}
.form-send-red::after{
	content: '';
	position: absolute;
	background: #eda050 !important;
	width:20rpx;
	height:20rpx;
	transform: rotate(45deg);
	left:-10rpx;
	top:30rpx;
	z-index:-1 !important;
}
/*对方收到红包*/
.form-receipt-red{
	background: none !important;
	padding: 0 !important;
}
.form-receipt-red::after{
	content: '';
	position: absolute;
	background: #eda050 !important;
	width:20rpx;
	height:20rpx;
	transform: rotate(45deg);
	left:-10rpx;
	top:30rpx;
	z-index:-1 !important;
}
/*我方发出红包*/
.my-send-red{
	padding:0 !important;
	background:none !important;
	margin-top: 10rpx;
	border-radius: 10rpx;
	position: relative;
	max-width: 500rpx;
	word-wrap:break-word; 
	word-break:break-all;
}
.my-send-red::after{
	content: '';
	position: absolute;
	background: #eda050 !important;
	width:20rpx;
	height:20rpx;
	transform: rotate(45deg);
	right:-10rpx;
	top:30rpx;
	z-index:-1 !important;
}
/*我方收到红包*/
.my-receipt-red{
	padding:0 !important;
	background:none !important;
}
.my-receipt-red::after{
	background: #eda050 !important;
	z-index:-1 !important;
}
.my_button{
	color:#fff;
	font-weight: normal;
	font-size: 32rpx;
	border:none;
	background: blue;
	background: #2979ff;
}
/*消息长按事件*/
.convers-tool{
  width: 200rpx;
  height: 370rpx;
  background:#222;
  z-index:9999;
  border-radius: 4px;
  left:38%;
  top:70rpx;
  text-align: center;
  color:#ccc;
  font-size: 30rpx;
}
.convers-tool .conv-bor{
  border-bottom: 1px solid #333;
}
.revoked{font-size: 30rpx;color:#999;background: #ffffff;padding:10rpx 30rpx;display: inline;border-radius: 6px;}
.video-list_play{
	/*top:30%;
	left:30%;
	z-index: 100;*/
}
.text-container {
  width: 100%; /* 设置容器宽度 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  display: -webkit-box; /* 使用webkit的盒子模型 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
}
</style>
